var starBtn = document.getElementById('btn');//开始游戏按钮
var gameBox = document.getElementById('gameBox');//格子
var flaxBox = document.getElementById('flaxBox');//装剩余雷数
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var lei = document.getElementById('lei');
var minesNum;//雷数
var mineover;//游戏结束
var block;
var minegrop=[];
var reChear = true;


clickThing();
function clickThing(){
    starBtn.onclick = function(){
        if(reChear){
            gameBox.style.display = 'block';
            flaxBox.style.display = 'block';
            init();
            reChear = false;
        }          
    }
    gameBox.oncontextmenu = function(){//右键点击事件
        return false;
    }
    gameBox.onmousedown = function(e){//鼠标按下时发生
        var event = e.target;//获取当前点击得小格
        if(e.which==1){
            leftClick(event);
        }else if(e.which==3){
            rightClick(event);
        }
        closeBtn.onclick = function(){
            alertBox.style.display = 'none';
            alertImg.style.display = 'none';
            gameBox.style.display = 'none';
            gameBox.innerHTML = '';
        }
    }
    }
    function init(){//生成100小格子,并且生产10个雷
        minesNum = 10;
        mineover = 10;
        lei.innerHTML = mineover;
        for (var i =0;i<10;i++){
            for(var j = 0;j<10;j++){
                var gez = document.createElement('div');
                gez.classList.add('block');
                gez.setAttribute('id',i+'-'+j);
                gameBox.appendChild(gez);
                minegrop.push({mine:0});//初始都是0，生成一个div时，就加1
            }
        }
        block = document.getElementsByClassName('block');
      while(minesNum){//当雷数有的时候，就随机生产一个位置，然后在100个格子随机生产雷
        var  minedz = Math.floor( Math.random()*100);//一个随机得雷
        if(minegrop[minedz].mine===0){
            minegrop[minedz].mine = 1;//雷的状态，就进不来了
            block[minedz].classList.add('islei');//当前格子是雷
            minesNum--;//每生成一个雷就-1，一共10个，--
        }
        block[minedz].classList.add('islei');
      }
    }
    function leftClick(lt){///左键设置
        if(lt.classList.contains('qizi')){
            return;
        }
        var islei = document.getElementsByClassName('islei');
        if(lt&& lt.classList.contains('islei')){//如果包含雷
            console.log('shibai');
            for(var i = 0;i<islei.length;i++){
                islei[i].classList.add('show');
            }///////////////////////////////是雷就是alert---overimg
            setTimeout(function(){
                alertBox.style.display = 'block';
                alertImg.style.backgroundImage = 'url(./img/over.jpg)';
            },500)
        }else{                  ////////////////////遍历，遍历周围八个格子的雷数，但是也分为0和不为0的情况
            var n=0;
         var pSz =    lt && lt.getAttribute('id').split('-');
         var pX = pSz && + pSz[0];
         var pY = pSz && + pSz[1];
         lt && lt.classList.add('num');
         for(var i = pX-1;i<=pX+1;i++){     //矩阵
                for(var j = pY-1;j<= pY+1;j++){
                var nine=    document.getElementById(i+'-'+j);//周围的盒子
                if(nine && nine.classList.contains('islei')){
                    n++;//是雷就加1
                }
            }
         }
         lt && (lt.innerHTML = n);
         if(n == 0){/////////////为0就扩散
             for(var i = pX-1;i<=pX+1;i++){/////////////////扩散
                 for(var j = pY-1;j<=pY+1;j++){/////////这个递归不等于0就停止
                     var nbhd = document.getElementById(i+'-'+j);
                     if(nbhd && nbhd.length !=0){//存在又不为0
                        if(!nbhd.classList.contains('check')){
                            nbhd.classList.add('check');
                            leftClick(nbhd);////等于0继续调用自己
                        }
                     }
                 }
             }
         }
        }
     }
     function rightClick(rt){/////右键事件---插旗-----需要做判断
        if(rt.classList.contains('num')){
            return ;
        }
        rt.classList.toggle('qizi');//切换----监控
        if(rt.classList.contains('islei')&&rt.classList.contains('qizi')){
            mineover--;
        }
        if(rt.classList.contains('islei')&& !rt.classList.contains('qizi')){
            mineover++;
        }
        lei.innerHTML = mineover;
        if(mineover == 0){
            alertBox.style.display = 'block';
            alertImg.style.backgroundImage = 'url(./img/success.png)';
        }
    }